<template>
  <el-card>
    <div class="top-filter">
      <el-radio-group size="small" v-model="type">
        <el-radio label="year">年</el-radio>
        <el-radio label="month">月</el-radio>
        <el-radio label="week">周</el-radio>
      </el-radio-group>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-descriptions>
          <el-descriptions-item label="拓展资源数">20</el-descriptions-item>
        </el-descriptions>
        <div ref="chartRef" class="chart"></div>
      </el-col>
      <el-col :span="12">
        <el-descriptions>
          <el-descriptions-item label="目标金额">1000000</el-descriptions-item>
          <el-descriptions-item label="完成金额">500000</el-descriptions-item>
          <el-descriptions-item label="未回返点">200</el-descriptions-item>
        </el-descriptions>
        <div style="margin-bottom: 10px">执行中项目</div>
        <el-table :data="tableData" row-key="name" border>
          <el-table-column prop="name" label="客户名称" />
          <el-table-column prop="amount" label="合同金额" />
          <el-table-column prop="profitMargin" label="利润率" />
          <el-table-column prop="progress" label="达人进度" />
          <el-table-column prop="platform" label="平台" />
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>
<script lang="ts" setup>
import {routes } from "@/router/index";
import { ref, onMounted,onUnmounted } from "vue";
import * as echarts from "echarts";
let chart: undefined | echarts.ECharts;
const debounce = (func: Function, time: number) => {
  let timer: NodeJS.Timeout | undefined;
  return () => {
    if (!timer) {
      timer = setTimeout(() => {
        func();
        timer = undefined;
      }, time);
    }
  };
};
console.log(routes)
const chartRef = ref();
const type = ref("year");
const tableData = ref([
  {
    name: "联想",
    amount: "1000000",
    profitMargin: "20%",
    progress: "5/10",
    platform: "小红书",
  },
]);
onMounted(() => {
  chart = echarts.init(chartRef.value);
  chart.setOption({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
      },
    ],
  });
  window.onresize = debounce(chart.resize, 300);
});
onUnmounted(()=>{
  window.onresize=null
})
</script>
<style scoped>
.top-filter {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
.chart {
  width: 100%;
  height: 300px;
}
</style>
